{{#if showHeader}}
  <section class="header clearfix">
    <h1>
      {{#if editing}}
        {{t "newMultiClusterApp.upgrade"}}
        <span class="text-normal">
          {{primaryResource.displayName}}
        </span>
      {{else}}
        {{#link-to (unbound parentRoute)}}
          {{t "newMultiClusterApp.catalog"}}
          {{templateResource.displayName}}
        {{/link-to}}
      {{/if}}
      {{#if templateResource.catalogRef.isHelm3}}
        <img class="helm-version-3 vertical-middle" src="{{app.baseAssets}}assets/images/logos/helm-v3.svg" />
      {{/if}}
    </h1>
  </section>
{{/if}}

<section>
  <div class="row">
    <div class="col span-4 text-center">
      {{#if templateResource.links.icon}}
        <img
          src={{templateResource.links.icon}}
          alt={{templateResource.name}}
          class="mr-20 app-icon"
        >
      {{/if}}
    </div>
    <div class="col span-8">
      {{#if appReadmeContent}}
        {{marked-down markdown=appReadmeContent}}
      {{else if (not noAppReadme)}}
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      {{else if noAppReadme}}
        <h1 class="mb-10 text-capitalize">
          {{templateResource.name}}
        </h1>
        <p>{{templateResource.description}}</p>
        <div class="row">
          <button
            class="btn btn-sm bg-transparent pl-0" type="button" {{action "toogleDetailedDescriptions"}}
          >
            {{t "newMultiClusterApp.seeMore"}}
          </button>
        </div>
      {{/if}}
    </div>
  </div>
</section>

{{#accordion-list as |al expandFn|}}
  {{#accordion-list-item
     title=(t "newMultiClusterApp.appInfo")
     detail=(t "newMultiClusterApp.appInfoDetail")
     expandAll=al.expandAll
     expand=(action expandFn)
     expanded=detailExpanded
  }}
    <div class="row">
      {{#if readmeContent}}
        <div
          class="col span-12 readme-content"
        >
          {{marked-down markdown=readmeContent}}
        </div>
      {{else}}
        <h2 class="mb-10">
          {{t (if editing titleUpgrade titleAdd) name=templateResource.name}}
        </h2>
        <p>{{templateResource.description}}</p>
      {{/if}}
    </div>
  {{/accordion-list-item}}



  {{#accordion-list-item
     title=(t (if selectedTemplateModel.questions "inputAnswers.config" "newMultiClusterApp.helm.label"))
     detail=(t (if selectedTemplateModel.questions "inputAnswers.protip" "newMultiClusterApp.helm.protip"))
     expandAll=al.expandAll
     expandOnInit=true
     expand=(action expandFn)
  }}

    <div class="row">
      <div class="col span-6">
        {{form-name-description
          model=primaryResource
          nameRequired=true
          descriptionShow=false
          nameDisabled=(or editing isLonghorn)
          bothColClass="col span-12"
          colClass="col span-12"
        }}
      </div>
      <div class="col span-6 pt-5">
        <label class="acc-label">{{t "newMultiClusterApp.templateVersion"}}</label>
        {{new-select
          classNames="form-control"
          content=sortedVersions
          disabled=getTemplate.isRunning
          localizedPrompt=true
          optionLabelPath="version"
          optionValuePath="link"
          prompt="newMultiClusterApp.version.prompt"
          value=editable.selectedTemplateUrl
        }}
      </div>
    </div>

    <div class="over-hr hand no-select">
      <span>
        {{t "newMultiClusterApp.targetDivider.label"}}
      </span>
    </div>

    {{form-project-targets
      addTarget=(action "addTarget")
      removeTarget=(action "removeTarget")
      targets=editable.multiClusterApp.targets
      projects=projects
      readOnly=readOnly
    }}

    <div class="over-hr">
      <span>
        {{t "newCatalog.helm.options.label"}}
      </span>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "newCatalog.helm.options.wait.label"}}
        </label>
        {{schema/input-boolean
          value=multiClusterApp.wait
          classNames="form-control"
        }}
        <p class="help-block">
          {{t "newCatalog.helm.options.wait.help"}}
        </p>
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "newCatalog.helm.options.timeout.label"}}
        </label>
        <div class="input-group">
          {{input-integer
            value=multiClusterApp.timeout
            min=1
            classNames="form-control"
          }}
          <span class="input-group-addon bg-default">
            {{t "generic.seconds"}}
          </span>
        </div>
        <p class="help-block">
          {{t "newCatalog.helm.options.timeout.help"}}
        </p>
      </div>
    </div>


    <div class="over-hr hand no-select">
      <span>
        {{t "newMultiClusterApp.upgradeDivider.label"}}
      </span>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">{{t "newMultiClusterApp.upgradeApp.title"}}</label>
        <div>
          <label class="radio">
            {{radio-button
              selection=upgradeStrategy
              value=true
            }}
            {{t "newMultiClusterApp.upgradeApp.enabled"}}
          </label>
        </div>
        <div>
          <label class="radio mt-0">
            {{radio-button
              selection=upgradeStrategy
              value=false
            }}
            {{t "newMultiClusterApp.upgradeApp.disabled"}}
          </label>
        </div>
      </div>
    </div>
    {{#if upgradeStrategy}}
      <div class="row">

        <div class="col span-3">
          <label class="acc-label">{{t "newMultiClusterApp.upgradeApp.batch"}}</label>
          {{input-integer
            min="1"
            value=multiClusterApp.upgradeStrategy.rollingUpdate.batchSize
            classNames="form-control"
            placeholder="1"
          }}
        </div>
        <div class="col span-3">
          <label class="acc-label">{{t "newMultiClusterApp.upgradeApp.interval"}}</label>
          <div class="input-group">
            {{input-integer
              min="1"
              value=multiClusterApp.upgradeStrategy.rollingUpdate.interval
              classNames="form-control"
              placeholder="1"
            }}
            <span class="input-group-addon bg-default">{{t 'generic.seconds'}}</span>
          </div>
        </div>
      </div>
    {{/if}}

    <div class="over-hr hand no-select">
      <span>
        {{t "newMultiClusterApp.rolesDivider.label"}}
      </span>
    </div>

    {{form-global-resource-roles
      multiClusterApp=multiClusterApp
      addRole=(action "addRole")
    }}

    {{#if getTemplate.isRunning}}
      <section class="row">
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      </section>
    {{else}}
      <div class="row">
        {{#if selectedTemplateModel}}
          <div class="col span-12">
            {{#if selectedTemplateModel.questions}}
              {{input-answers
                app=multiClusterApp
                selectedTemplate=selectedTemplateModel
                showHeader=false
                isMultiClusterApp=true
              }}
            {{else}}
              {{input-custom-answers
                app=multiClusterApp
                isMultiClusterApp=true
                selectedTemplate=selectedTemplateModel
              }}
            {{/if}}
          </div>
        {{/if}}
      </div>
    {{/if}}
  {{/accordion-list-item}}

  {{#accordion-list-item
     title=(t "newMultiClusterApp.members.title")
     detail=(t "newMultiClusterApp.members.detail")
     expandAll=al.expandAll
     expandOnInit=false
     expand=(action expandFn)
     expanded=detailExpanded
  }}
    {{form-members-global-access
      readOnly=readOnly
      resource=multiClusterApp
      addAuthorizedPrincipal=(action "addAuthorizedPrincipal")
      removeMember=(action "removeMember")
      gotError=(action "gotError")
    }}

  {{/accordion-list-item}}

  {{#accordion-list-item
     title=(t "newMultiClusterApp.overrides.label")
     detail=(t "newMultiClusterApp.overrides.detail")
     expandAll=al.expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="right-buttons">
      <button
        class="btn bg-primary btn-sm" type="button" {{action "addAnswerOverride"}}
      >
        <i class="icon icon-plus"></i>
        {{t "newMultiClusterApp.overrides.add.label"}}
      </button>
    </div>
    {{#sortable-table
       classNames="grid sortable-table"
       sortBy=sortBy
       headers=overridesHeaders
       searchText=searchText
       pagingLabel="pagination.member"
       descending=descending
       body=answerOverrides
       bulkActions=false
       as |sortable kind answer dt|
    }}
      {{#if (eq kind "row")}}
        {{#unless answer.isSubQuestion}}
          {{answer-override-row
            addSubrowQuestions=(action "addDependentSubQuestions")
            answer=answer
            primaryResource=primaryResource
            answerOverrides=answerOverrides
            removeAnswerOverride=(action "removeAnswerOverride")
            removeSubrowQuestions=(action "removeDependentSubQuestions")
            selectedTemplateModel=selectedTemplateModel
          }}
        {{/unless}}
      {{else if (eq kind "nomatch")}}
        <td
          colspan="5"
          class="no-match"
        >
          {{t "newMultiClusterApp.overrides.table.noMatch"}}
        </td>
      {{else if (eq kind "norows")}}
        <td
          colspan="5"
          class="no-data"
        >
          {{t "newMultiClusterApp.overrides.table.noData"}}
        </td>
      {{/if}}

    {{/sortable-table}}

  {{/accordion-list-item}}

{{/accordion-list}}

{{#if (and selectedTemplateModel (not getTemplate.isRunning))}}
  {{#if showPreview}}
    <section>
      <div class="over-hr hand no-select">
        <span {{action "togglePreview"}}>
          {{t "newMultiClusterApp.preview"}} <i class="icon {{if previewOpen "icon-chevron-up" "icon-chevron-down"}}"></i>
        </span>
      </div>

      {{#if previewOpen}}
        <div class="tabs">
          <div class="tab-header row">
            <div>
              <label class="acc-label">{{t "newMultiClusterApp.templateFiles"}}</label>
              {{searchable-select
                content=filenames
                value=previewTab
                readOnly=readOnly
              }}
            </div>
          </div>

          <div class="row">
            {{#if decoding}}
              <section class="row">
                <div class="text-center">
                  <i class="icon icon-spinner icon-spin icon-3x"></i>
                </div>
              </section>
            {{else}}
              {{#if (eq  previewTab "answers")}}
                {{code-block
                  code=answersString
                  language="yaml"
                }}
              {{else}}
                {{code-block
                  code=selectedFileContetnt
                  language="yaml"
                }}
              {{/if}}
            {{/if}}
          </div>
        </div>
      {{/if}}
    </section>
  {{/if}}

  {{#if isGKE}}
    <div class="banner bg-warning">
      <div class="banner-icon">
        <span class="icon icon-alert"></span>
      </div>
      <div class="banner-message">
        <p>{{t "ingressPage.gkeIngressWarning"}}</p>
      </div>
    </div>
  {{/if}}

  {{top-errors errors=errors}}
  <div class="footer-actions">
    {{save-cancel
      createLabel=(if editing saveUpgrade saveNew)
      save=(action "save")
      saving=mcAppSaving
      cancel=(action "cancel")
    }}
  </div>
{{else}}
  <div class="footer-actions">
    <button
      class="btn bg-transparent" type="button" {{action "cancel"}}
    >
      {{t "saveCancel.cancel"}}
    </button>
  </div>
{{/if}}
